F2E合作社｜border通用類別｜Bootstrap 5網頁框架開發入門

前言

border 主要用途是設定物件的邊框線， outline 是設定物件的外框線，這兩個很類似，但卻有一些細節有所差異，可以簡單用下列兩點快速比較：

1. border 可以有「 占據空間 」的特性， outline 則沒有。
2. border 的外觀可以做圓角， outline 則永遠為矩形（ 物件的矩形空間 ）。

因為 border 可以支援圓角，所以在實務使用次數上面， border 的機會也多過於 outline 。（ 以我來說啦哈哈哈 ）

（ 圖片來源 ）

之前也有寫過相關文章，所以這裡只會簡略說明，想看更詳盡的介紹 這邊 歡迎光臨！

官方網站的 Borders 頁面

增加邊框

<span class="border">border</span>
<span class="border-top">border-top</span>
<span class="border-end">border-end</span>
<span class="border-bottom">border-bottom</span>
<span class="border-start">border-start</span>

減少邊框

<span class="border border-0">border-0</span>
<span class="border border-top-0">border-top-0</span>
<span class="border border-end-0">border-end-0</span>
<span class="border border-bottom-0">border-bottom-0</span>
<span class="border border-start-0">border-start-0</span>

邊框顏色

<span class="border border-primary">border-primary</span>
<span class="border border-secondary">border-secondary</span>
<span class="border border-success">border-success</span>
<span class="border border-danger">border-danger</span>
<span class="border border-warning">border-warning</span>
<span class="border border-info">border-info</span>
<span class="border border-light">border-light</span>
<span class="border border-dark">border-dark</span>
<span class="border border-white">border-white</span>

邊框寬度

<span class="border border-1">border-1</span>
<span class="border border-2">border-2</span>
<span class="border border-3">border-3</span>
<span class="border border-4">border-4</span>
<span class="border border-5">border-5</span>

邊框圓角

<img src="https://via.placeholder.com/100" class="rounded-top" alt="">
<img src="https://via.placeholder.com/100" class="rounded-end" alt="">
<img src="https://via.placeholder.com/100" class="rounded-bottom" alt="">
<img src="https://via.placeholder.com/100" class="rounded-start" alt="">
<img src="https://via.placeholder.com/100" class="rounded-circle" alt="">
<img src="https://via.placeholder.com/200x100" class="rounded-pill" alt="">

邊框尺寸

使用縮放的 class 將圓角放大或縮小，尺寸的範圍為 0 到 3 。

<img src="https://via.placeholder.com/150" class="rounded-0" alt="">
<img src="https://via.placeholder.com/150" class="rounded-1" alt="">
<img src="https://via.placeholder.com/150" class="rounded-2" alt="">
<img src="https://via.placeholder.com/150" class="rounded-3" alt="">

參考資料

1. Borders · Bootstrap v5.0
2. 邊框 (Borders) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. 共用項目border-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學